<!--
 * @description: 
 * @Date: 2022-12-13 09:42:45
 * @example: 
 * @params: 
-->
<template>
  <div>  
    <HeaderTopVue/>
    <div class="Container">
    <div class="box_left">
     <h1>Personal Center</h1>
    </div>
    <div class="box_right">
      <div class="info">
        <div class="account">
            <h1>Account Information</h1>
           <div class="avatar">
                <ImageUplodVue @UploadSuccess="handleImageUrl" @DeleteSuccess="handleDeleteImage" :imgUrls="$store.getters.image" :fileName="$store.getters.fileName" />
                <span>{{this.userInfo.nickname}}</span>
           </div>
           <div class="infos">
            <Form :model="userInfo" label-position="top">
            <Row :gutter="40" style="margin-top: 20px;">
                <Col span="12">
                    <FormItem label="User Name">
                         <Input v-model="userInfo.nickname" placeholder="enter your name ..." @on-blur="handleRefrshNickname"></Input>
                    </FormItem>
                </Col>
                <Col span="12">
                   <FormItem label="Enter Email">
                         <Input v-model="userInfo.username" disabled></Input>
                    </FormItem>
                </Col>
            </Row>
            <Row :gutter="40" style="margin-top: 20px;">
                <Col span="12">
                    <FormItem label="Password">
                         <Input type="password" v-model="userInfo.password"></Input>
                    </FormItem>
                </Col>
                <Col span="12">
                    <FormItem label="Profession">
                         <Input v-model="userInfo.role" disabled></Input>
                    </FormItem>
                </Col>
            </Row>
         </Form>
           </div>
        </div>
        <div class="personal">
          <h1>Personal Information</h1>
        </div>
      </div>
    </div>
  </div>
</div>

</template>
<script>
import ImageUplodVue from '@/components/ImageUplod.vue';
import HeaderTopVue from '@/components/HeaderTop.vue';
export default {
  data() {
    return {
        userInfo:{
        id:"",
        password:"",
        username:"",
        role:"",
        nickname:"",
        avatar:"",
        fileName:""
        },
       
    };
  },
  components:{
    ImageUplodVue,
    HeaderTopVue
  },
  /** 回显默认邮箱账号与秘密  */
  created(){
    this.userInfo = this.$store.state.Userinfo;
    console.log(this.userInfo)
  },
  updated(){
    this.userInfo = this.$store.state.Userinfo;
    console.log("------------------updated---------------")
    console.log(this.userInfo)
  },
  methods: {
    /** 上传成功Emit 头像上传成功需要更新 */
    handleImageUrl(url){
        const { id }  = this.userInfo
        const { Image,fileName } = url
        this.handleRefrshAvatar({id,Image,fileName})
    },
    /** 删除头像 Emit 数据库删除头像  */
    handleDeleteImage(){
        const { id }  = this.userInfo
        this.$store.dispatch('HandleDeleteAvatar',{id})
    },
    /** 更新头像 */
    handleRefrshAvatar(avatar){
        this.$store.dispatch('HandleUpadteAvatar',avatar)
    },
     /** 更新NIckname */
    handleRefrshNickname(){
        const nicknames = {
            nickname:this.userInfo.nickname,
            id:this.$store.getters.id
        }
        this.$store.dispatch("HandleUpadteNickname",nicknames)
    },
    goback(){
        this.$router.go(-1)
    }
  },
};
</script>
<style lang="less" scoped>
.Container {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #18283e;
  padding: 20px;
  display: flex;
  .box_left {
    width: 20%;
    background-image: url(../assets/Personalcenter.png);
    background-repeat: no-repeat;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
    padding: 20px;
    h1{
      font-size: 16px;
      color: #fff;
      position: absolute;
      left: 80px;
      top: 60px;
    }
  }
  .box_right {
    width: 110%;
    background-color: #1b263f;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    .info {
      width: 80%;
      height: 100%;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .account {
        width: 80%;
        height: 260px;
        background: url(../assets/Accountinformation.94a020e5.png) no-repeat ;
        border-radius: 12px;
        background-position: center;
        background-size:cover;
        box-shadow: 0 0 40px -30px #acacac;
        display: flex;
        position: relative;
        h1 {
            position: absolute;
            top: -50px;
            color: #e5e5e5;
            font-size: 16px;
        }
        .avatar{
            width: 20%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            margin-left: 30px;
            span {
                margin-top: 20px;
            }
        }
        .infos {
            padding: 20px;
            width: 80%;
        }
      }
      .personal {
        width: 80%;
        height: 209px;
        background: url(../assets/Basicinformation.83eb668b.png) no-repeat;
        border-radius: 12px;
        background-size: cover;
        background-position: center;
        margin-top: 80px;
        box-shadow: 0 0 40px -30px #acacac;
        position: relative;
        h1 {
            position: absolute;
            top: -50px;
            color: #e5e5e5;
            font-size: 16px;
        }
      }
    }
  }
}

::v-deep .ivu-form-label-top .ivu-form-item-label {
    font-weight: 500 !important;
    color: #fff;

}
::v-deep .ivu-input {
    background-color: #1b263f !important;
    outline: none !important;
    border: none !important;
}
</style>
